<!DOCTYPE html>
<html lang="en"
>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
<div class="panel panel-default operation_inventory" hidden>
    <div class="panel-heading title"></div>
    <div class="layui-card-body">
        <form class="layui-form " action="" lay-filter="deptInfo" style="width: 700px;margin-top: 10px">
            <input name="id" hidden/>
            <input name="pid" hidden/>

            <div class="layui-form-item">
                <label class="layui-form-label">所属仓库</label>
                <div class="layui-input-block">
                    <select id="warehourseId" name="warehouseId" type="warehouseId">
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-form-label ">所属区域</div>
                <div class="layui-input-block">
                    <input type="region" name="region" placeholder="请输入所属区域" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-form-label ">所属中心</div>
                <div class="layui-input-block">
                    <input type="owner" name="owner" placeholder="请输入所属中心" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-form-label ">库位号</div>
                <div class="layui-input-block">
                    <input type="inventoryLocationNo" name="inventoryLocationNo" placeholder="请输入库位号" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
                    <button class="layui-btn layui-btn-primary" id="btn_cancel">返回</button>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="inventory_table_div">
    <div id="searchParam">
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input type="text" id="warehouseName" class="layui-input" autocomplete="off" placeholder="请输入所属仓库">
            </div>

            <div class="layui-input-inline">
                <input type="text" id="region" class="layui-input" autocomplete="off" placeholder="请输入所属区域">
            </div>
            <div class="layui-input-inline">
                <input type="text" id="inventoryLocationNo" class="layui-input" autocomplete="off" placeholder="请输入库位号  ">
            </div>


            <div class="layui-input-inline layui-form">
                <select id="enabled">
                    <option value="">请选择库位状态</option>
                    <option value="Created">创建</option>
                    <option value="Enabled">启用</option>
                    <option value="Disabled">禁用</option>
                </select>
                </div>
                <div class="layui-input-inline ">
                    <button class="layui-btn" onclick="search()" id="search">查询</button>
                </div>
            </div>
        </div>
    <table class="layui-hide" id="inventory_table" lay-filter="inventory_table"></table>
</div>
</body>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addNewInventory" >添加</button>
    </div>
</script>

<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script>
    //获取token
    var token = CoreUtil.getData("access_token");
    //地址栏转义token中的#号
    var tokenQuery = token.replace("#", "%23");
    var tableIns1;
    var table = layui.table;
    var form = layui.form;
    var layer = layui.layer;
    var $ = jQuery = layui.jquery;
    var laydate = layui.laydate;
    var startTime = null;
    var endTime = null;
    layui.config({
        base: '/layui-ext/'
    }).use(['table', 'laypage', 'layer', 'laydate'], function () {
        var eleTree = layui.eleTree;
        tableIns1 = table.render({
            elem: '#inventory_table'
            , contentType: 'application/json'
            , headers: {"authorization": token}
            , page: true //开启分页
            , url: '/inventory/list' //数据接口
            , method: 'POST'
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
                    "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
                }
            }
            , cols: [
                [
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'id', title: '序号', width: 200},
                    {field: 'warehouseName', title: '所属仓库', width: 200},
                    {field: 'inventoryLocationNo', title: '库位号', width: 200},
                    {field: 'region', title: '区域', width: 200},
                    {field: 'owner', title: '所属中心', width: 200},
                    {field: 'createdDate', title: '创建时间', minWidth: 120},
                    {field: 'lastModifiedDate', title: '更新时间', minWidth: 120},
                    {
                        field: 'currentState', title: '状态', width: 100, templet: function (item) {
                            if (item.currentState === 'Created') {
                                return '创建';
                            }
                            if (item.currentState === 'Enabled') {
                                return ' 启用';
                            }
                            if (item.currentState === 'Disabled') {
                                return '禁用';
                            }
                        }
                    },
                    {field: 'createdBy', title: '经办人', width: 300},
                    {
                        title: '操作', width: 250, templet: function (item) {
                            var btn = " <a  class='layui-btn layui-btn-danger layui-btn-xs' lay-event='del'>删除</a>"+
                                " <a class='layui-btn layui-btn-xs' lay-event='edit'>编辑</a>";
                            if (item.currentState !== 'Enabled') {
                                btn = btn + "<a class='layui-btn  layui-btn-danger layui-btn-xs' lay-event='enabled'>启用</a>"
                            } else {
                                btn = btn + "<a class='layui-btn  layui-btn-danger layui-btn-xs' lay-event='disabled'>禁用</a>"
                            }
                            return btn;
                        }

                    }
                ]
            ], toolbar: '#toolbar'
        });

        laydate.render({
            elem: '#createTime'
            , type: 'datetime'
            , range: '~'
            , done: function (value, date, endDate) {
                if (value != null && value != undefined && value != "") {
                    startTime = value.split("~")[0];
                    endTime = value.split("~")[1];
                } else {
                    startTime = null;
                    endTime = null;
                }

            }
        });
        table.on('toolbar(inventory_table)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'addNewInventory':
                    //隐藏表格
                    $(".inventory_table_div").hide();
                    //显示编辑窗口
                    $(".operation_inventory").show();
                    $(".title").html("新增库位");
                    $(".operation_inventory input[name=id]").val("");
                    $(".operation_inventory input[name=warehouseId]").val("");
                    $(".operation_inventory input[name=inventoryLocationNo]").val("");
                    $(".operation_inventory input[name=region]").val("");
                    $(".operation_inventory input[name=owner]").val("");


                    // var d = document.getElementsByTagName('em')[0];
                    // d.firstChild.nodeValue = '启用';
                    form.render(); //更新全部
                    break;
            }
        });
        table.on('tool(inventory_table)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'enabled':
                    tipDialog(data.id, data.currentState);
                    break;
                case 'disabled':
                    tipDialog(data.id, data.currentState);
                    break;
                case 'del':
                    deleteById (data.id, data.name);
                    break;
                case 'edit':
                    $(".inventory_table_div").hide();
                    //显示编辑窗口
                    $(".operation_inventory").show();
                    $(".title").html("编辑供应商");
                    getinventoryDetail(data.id);
                    break;
            }
        });
        /**
         * 删除
         * @param id
         * @param name
         */
        var deleteById= function (id, name) {
            layer.open({
                content: '确定要删除' + name + "?",
                yes: function (index, layero) {
                    layer.close(index); //如果设定了yes回调，需进行手工关闭
                    CoreUtil.sendPost("/inventory/delete/" + id, null, function (res) {
                        layer.msg(res.msg);
                        search();
                    });
                }
            });
        }
        var getinventoryDetail = function (id) {
            CoreUtil.sendGet("/inventory/get/" + id, null, function (res) {
                $(".operation_inventory input[name=id]").val(res.data.id);
                $(".operation_inventory input[name=code]").val(res.data.code);
                $(".operation_inventory input[name=name]").val(res.data.name);
                $(".operation_inventory input[name=address]").val(res.data.address);
                $(".operation_inventory input[name=contact]").val(res.data.contact);
                $(".operation_inventory input[name=phone]").val(res.data.phone);
                $(".operation_inventory input[name=bankName]").val(res.data.bankName);
                $(".operation_inventory input[name=accountBankName]").val(res.data.accountBankName);
                $(".operation_inventory input[name=bankAccountNo]").val(res.data.bankAccountNo);
                form.render(); //更新全部

            });
        }
        form.on('switch(switch)', function () {
            $(".operation_inventory input[name=currentState]").attr('type', 'hidden').val(this.checked ? 1 : 0);

        });

        $("#btn_cancel").click(function () {
            $(".inventory_table_div").show();
            $(".operation_inventory").hide();
            $(".operation_inventory_dataScope").hide();
            return false;
        });

        //监听提交
        form.on('submit(submit)', function (data) {
            var params = {
                id: data.field.id,
                warehouseId: data.field.warehouseId,
                region: data.field.region,
                inventoryLocationNo: data.field.inventoryLocationNo,
                owner: data.field.owner

            }
            if (data.field.id === undefined || data.field.id === null || data.field.id === "") {
                CoreUtil.sendPost("/inventory/create", params, function (res) {
                    $(".inventory_table_div").show();
                    $(".operation_inventory").hide();
                    $(".operation_inventory_dataScope").hide();
                    search();
                });
            } else {
                CoreUtil.sendPost("/inventory/" + data.field.id + "/update", params, function (res) {
                    //显示表格
                    $(".inventory_table_div").show();
                    //隐藏编辑窗口
                    $(".operation_inventory").hide();
                    $(".operation_inventory_dataScope").hide();
                    search();
                });
            }

            return false;
        });

    });
    //执行禁用启用操作弹框
    var tipDialog = function (id, currentState) {
        var url = "";
        var message = "";
        if (currentState === "Disabled") {
            url = "/inventory/" + id + "/enable";
            message = "确定要启用吗";

        } else {
            url = "/inventory/" + id + "/disable";
            message = "确定要禁用吗";
        }

        layer.open({
            content: message,
            yes: function (index) {
                layer.close(index); //如果设定了yes回调，需进行手工关闭
                CoreUtil.sendPost(url, null,function (res) {
                    layer.msg(res.msg);
                    search();
                });
            }
        });


    };

    //执行查询
    function search() {
        //这里以搜索为例
        tableIns1.reload({
            where: { //设定异步数据接口的额外参数，任意设
                inventoryLocationNo: $("#inventoryLocationNo").val(),
                region: $("#region").val(),
                warehouseName: $("#warehouseName").val(),
                enabled: $("#enabled").val()
            }
            , page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    }

    //页面初始化加载函数
    $(function(){
        warehourseOption();
    });


    /**
     * 下拉框渲染方法
     */
    function warehourseOption(){
        CoreUtil.sendPost("/warehouse/getOption", null, function (data) {
            $("#warehourseId").empty();
            $("#warehourseId").append("<option value=''>" + "----请选择----" + "</option>");

            for ( var i = 0; i < data.data.length; i++) {

                $("#warehourseId").append("<option value=" + data.data[i].id + ">" + data.data[i].name + "</option>");
            }
        });
    }

</script>
</html>
